<template>
	<view class="page">
		<view class="upload-container f-column" v-if="picSrc">
			<swiper class="pic-swiper" :indicator-dots="false" :autoplay="false">
				<swiper-item class="pic-swiper-item" v-for="(item, index) in picSrc" :key="index">
					<view class="pic-swiper-item-view">
						<image class="upload-pic" mode="aspectFit" :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="upload-button" @click="uploadPic" v-if="type == 'upload'">点击上传</view>
		<view class="choose-button" @click="choosePic" v-if="type == 'choose'">选择图片</view>
		<view class="choose-button" @click="replacePic" v-if="type == 'replace'">替换</view>
	</view>
</template>

<script>
	let _this;
	const app = getApp();
	import { showToast } from '../../lib/utils.js'
	export default {
		data() {
			return {
				screenWidth:app.globalData.SYSTEMINFO.screenWidth,
				screenHeight:app.globalData.SYSTEMINFO.screenHeight,
				picSizeW: false,
				picSizeH: false,
				picSrc: false,
				picStyle: '',
				id: 0,
				type: 'upload',
			}
		},
		onLoad(options) {
			_this = this;
			_this.id = options.id;
			if(options.type) {
				_this.type = options.type;
			}
			let STORAGE_DATA = uni.getStorageSync('STORAGE_DATA');
			if(STORAGE_DATA) {
				_this.picSrc = STORAGE_DATA.picSrc;
				if(STORAGE_DATA.type) _this.type =STORAGE_DATA.type;
			}else {
				uni.showToast({
					title: '请求错误',
					icon: 'none',
					success: () => {
						setTimeout(() => {
							uni.navigateBack();
						},250);
					}
				})
			}
			uni.removeStorageSync('STORAGE_DATA');
		},
		methods: {
			uploadPic() {
				uni.showModal({
					title: '确认上传该图片吗？',
					success: (res) => {
						if(res.confirm) {
							uni.uploadFile({
								url: 'http://user.shunbo.com.cn/mer/upload/image/'+ _this.id +'/file',
								filePath: _this.picSrc[0],
								name: 'file',
								fileType: 'image',
								header: {
									'X-Token' : _this.$store.getters.getToken
								},
								formData: {
									'file' : _this.picSrc[0]
								},
								success: (respon) => {
									let result = JSON.parse(respon.data.replace(/[\\]/g,''));
									console.log(result);
									showToast('上传成功');
									setTimeout(() => {
										uni.navigateBack();
									},250);
								},
								fail: (error) => {
									console.log(error);
									showToast('上传失败');
								}
							});
						}
					}
				})
			},
			choosePic() {
				uni.chooseImage({
				  	count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['camera','album'], //这要注意，camera掉拍照，album是打开手机相册
				    success: (res)=> {
						const tempFilePaths = res.tempFilePaths;
						_this.picSrc = tempFilePaths;
						_this.type = 'replace';
				    }
				});
			},
			replacePic() {
				uni.showModal({
					title: '确认替换为当前图片吗？',
					success: (res) => {
						if(res.confirm) {
							showToast('暂未开放，敬请期待')
						}
					}
				})
			}
		}
	}
</script>

<style>
.upload-container{
	flex: 1;
	background: rgba(0, 0, 0, .9);
	justify-content: center;
	align-items: center;
}
.pic-swiper , .pic-swiper-item , .pic-swiper-item-view , .upload-pic{
	width: 100vw;
	height: 100vw;
}
.upload-pic{
	background-color: #FFFFFF;
}
.upload-button{
	height: 100rpx;
	line-height: 100rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	color: #FFFFFF;
	background-color: #007AFF;
	text-align: center;
}
.choose-button{
	height: 100rpx;
	line-height: 100rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	color: #FFFFFF;
	background-color: #DF2000;
	text-align: center;
}
</style>
